<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>MES看板系统</title>
<link rel="stylesheet" th:href="@{/js/bootstrap/bootstrap.min.css}"></link>
<link rel="stylesheet" th:href="@{/css/smart-manage.css}" />
<link rel="stylesheet" th:href="@{/css/sweetalert.css}" />
<link rel="stylesheet" th:href="@{/composents/element-ui/lib/theme-chalk/index.css}" />
<link rel="stylesheet" th:href="@{/css/dashboard.css}" />
<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  
  .el-aside {
    color: #333;
  }
  
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
  }
</style>	
</head>
<body>
	<div id="app">
		<el-container id="main" style="border: 1px solid #eee">
		
		  	<el-header class="header_img" style="text-align: right; font-size: 12px">
		  	
		  		<span class="logo fl">
		  			<img th:src="@{/img/logo.png}">
		  			<span class="sysname">MES看板系统</span>
		  		</span>
			      <el-dropdown>
			        <i class="el-icon-setting" style="margin-right: 15px"></i>
			        <el-dropdown-menu slot="dropdown">
			          <el-dropdown-item>
			          	<span @click="logout()">退出</span>
			          </el-dropdown-item>
			          <!-- <el-dropdown-item>新增</el-dropdown-item>
			          <el-dropdown-item>删除</el-dropdown-item> -->
			        </el-dropdown-menu>
			      </el-dropdown>
			      <span th:text="${userInfo.userName}"></span>
		  	</el-header>
		    
		  	<el-container>
			  	 <el-aside style="width:200px;background-color: rgb(238, 241, 246)">
				    <el-menu default-active="1-1" class="el-menu-vertical-demo" :collapse="isCollapse" >
				      <el-submenu index="1">
				        <template slot="title"><i class="el-icon-message"></i> <span slot="title">播放列表</span></template>
				          <el-menu-item index="1-1" @click="openTab('/pollingConfig/toList')">看板配置</el-menu-item>
				      </el-submenu>
				      <el-submenu index="2">
				        <template slot="title"><i class="el-icon-menu"></i><span slot="title">素材管理</span></template>
				          <el-menu-item index="2-1" @click="openTab('material/toConfig')">素材列表</el-menu-item>
				          <el-menu-item index="2-2" @click="openTab('material/toAdd')">素材上传</el-menu-item>
				      </el-submenu>
				      <el-submenu index="3">
				        <template slot="title"><i class="el-icon-menu"></i><span slot="title">系统管理</span></template>
				          <el-menu-item index="3-1" @click="openTab('userMessage/to_page')">用户管理</el-menu-item>
				          <el-menu-item index="3-2" @click="openTab('userRole/toList')">角色管理</el-menu-item>
				          <el-menu-item index="3-3" @click="openTab('userMessage/to_menu_page')">菜单管理</el-menu-item>
				          <el-menu-item index="3-4" @click="openTab('userJob/toList')">作业管理</el-menu-item>
				      </el-submenu>
				    </el-menu>
				</el-aside>
			    <el-main>
			    	<div id="mainApp"></div>
			    </el-main>
			</el-container>
			
		</el-container>
	</div>
</body>
<script type="text/javascript" th:src="@{/js/jquery.js}"></script>
<script type="text/javascript" th:src="@{/js/common.js}"></script>
<script type="text/javascript" th:src="@{/js/sweetalert.min.js}"></script>
<script type="text/javascript" th:src="@{/js/vue/vue.js}"></script>
<script type="text/javascript" th:src="@{/composents/element-ui/lib/index.js}"></script>
<script type="text/javascript" th:src="@{/js/moment/moment.min.js}"></script>
<script>
	var height = $(window).height();
	$("#main").height(height);
	//首页默认加载看板配置
	$.get(COMMON_URL.URL+"pollingConfig/toList",function(data){
		$('#mainApp').html(data);
    }); 
	
	function openTab(targetName){
		$.get(COMMON_URL.URL+targetName,function(data){
			$('#mainApp').html(data);
	 	});
	}
	var app4 = new Vue({
	   el: '#app',
	   data: {
	      isCollapse: false
	   },
	   methods:{
		  //加载新页面
		  openTab(targetName) {
			  //该变DIV块内容
			  $.get(COMMON_URL.URL+targetName,function(data){
				 $('#mainApp').html(data);
			  });
	      },
	      logout(){
	    	 $.get(COMMON_URL.URL+"logout",function(){
	    		 
	    		 window.location.href = COMMON_URL.URL+"login";
	    	 });
	      }
	   }
	})
</script>
</html>